<!-- 新建跟进记录模态框表单 -->
<form method="POST" id="followupForm">
    {{ form.hidden_tag() }}
    
    <!-- 客户选择 -->
    <div class="mb-4">
        <label for="{{ form.customer_id.id }}" class="block text-sm font-medium text-gray-700 mb-2">客户 <span class="text-red-500">*</span></label>
        {{ form.customer_id(class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" + (" border-red-500" if form.customer_id.errors else ""), id="customer-select") }}
        {% if form.customer_id.errors %}
        <p class="mt-1 text-sm text-red-600">
            {% for error in form.customer_id.errors %}
            {{ error }}
            {% endfor %}
        </p>
        {% endif %}
    </div>

    <!-- 联系人选择 -->
    <div class="mb-4">
        <label for="{{ form.contact_ids.id }}" class="block text-sm font-medium text-gray-700 mb-2">联系人</label>
        <div class="space-y-2 form-check-container">
            {% for choice in form.contact_ids %}
                <div class="flex items-center">
                    {{ choice(class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded") }}
                    {{ choice.label(class="ml-2 block text-sm text-gray-700") }}
                </div>
            {% endfor %}
        </div>
        {% if form.contact_ids.errors %}
        <p class="mt-1 text-sm text-red-600">
            {% for error in form.contact_ids.errors %}
            {{ error }}
            {% endfor %}
        </p>
        {% endif %}
    </div>

    <!-- 项目选择 -->
    <div class="mb-4">
        <label for="{{ form.project_id.id }}" class="block text-sm font-medium text-gray-700 mb-2">关联项目</label>
        {{ form.project_id(class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" + (" border-red-500" if form.project_id.errors else ""), id="project-select") }}
        {% if form.project_id.errors %}
        <p class="mt-1 text-sm text-red-600">
            {% for error in form.project_id.errors %}
            {{ error }}
            {% endfor %}
        </p>
        {% endif %}
    </div>

    <!-- 跟进时间和方式 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        <div>
            <label for="{{ form.followup_time.id }}" class="block text-sm font-medium text-gray-700 mb-2">跟进时间 <span class="text-red-500">*</span></label>
            {{ form.followup_time(class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 datetime-picker" + (" border-red-500" if form.followup_time.errors else ""), value=form.followup_time.data.strftime('%Y-%m-%dT%H:%M') if form.followup_time.data else '') }}
            {% if form.followup_time.errors %}
            <p class="mt-1 text-sm text-red-600">
                {% for error in form.followup_time.errors %}
                {{ error }}
                {% endfor %}
            </p>
            {% endif %}
        </div>
        <div>
            <label for="{{ form.method.id }}" class="block text-sm font-medium text-gray-700 mb-2">跟进方式 <span class="text-red-500">*</span></label>
            {{ form.method(class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" + (" border-red-500" if form.method.errors else "")) }}
            {% if form.method.errors %}
            <p class="mt-1 text-sm text-red-600">
                {% for error in form.method.errors %}
                {{ error }}
                {% endfor %}
            </p>
            {% endif %}
        </div>
    </div>

    <!-- 跟进内容 -->
    <div class="mb-4">
        <label for="{{ form.content.id }}" class="block text-sm font-medium text-gray-700 mb-2">跟进内容 <span class="text-red-500">*</span></label>
        {{ form.content(class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" + (" border-red-500" if form.content.errors else ""), rows="4", placeholder="请输入本次跟进的具体内容...") }}
        {% if form.content.errors %}
        <p class="mt-1 text-sm text-red-600">
            {% for error in form.content.errors %}
            {{ error }}
            {% endfor %}
        </p>
        {% endif %}
    </div>

    <!-- 跟进结果 -->
    <div class="mb-4">
        <label for="{{ form.result.id }}" class="block text-sm font-medium text-gray-700 mb-2">跟进结果</label>
        {{ form.result(class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" + (" border-red-500" if form.result.errors else ""), rows="3", placeholder="请输入本次跟进的结果...") }}
        {% if form.result.errors %}
        <p class="mt-1 text-sm text-red-600">
            {% for error in form.result.errors %}
            {{ error }}
            {% endfor %}
        </p>
        {% endif %}
    </div>

    <!-- 下次跟进时间 -->
    <div class="mb-4">
        <label for="{{ form.next_followup_time.id }}" class="block text-sm font-medium text-gray-700 mb-2">下次跟进时间</label>
        {{ form.next_followup_time(class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 datetime-picker" + (" border-red-500" if form.next_followup_time.errors else ""), value=form.next_followup_time.data.strftime('%Y-%m-%dT%H:%M') if form.next_followup_time.data else '') }}
        {% if form.next_followup_time.errors %}
        <p class="mt-1 text-sm text-red-600">
            {% for error in form.next_followup_time.errors %}
            {{ error }}
            {% endfor %}
        </p>
        {% endif %}
    </div>

    <!-- 解决方案配合 -->
    <div class="mb-4">
        <div class="flex items-center mb-2">
            {{ form.solution_support(class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded") }}
            <label class="ml-2 block text-sm text-gray-700" for="{{ form.solution_support.id }}">
                需要解决方案人员配合
            </label>
        </div>
        <div id="solution-support-user-container" style="display: none;">
            <label for="{{ form.solution_support_user_id.id }}" class="block text-sm font-medium text-gray-700 mb-2">配合人员</label>
            {{ form.solution_support_user_id(class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" + (" border-red-500" if form.solution_support_user_id.errors else "")) }}
            {% if form.solution_support_user_id.errors %}
            <p class="mt-1 text-sm text-red-600">
                {% for error in form.solution_support_user_id.errors %}
                {{ error }}
                {% endfor %}
            </p>
            {% endif %}
        </div>
    </div>

    <!-- 提交按钮 -->
    <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
        <button type="button" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-bs-dismiss="modal">
            <i class="fas fa-times mr-2"></i> 取消
        </button>
        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            <i class="fas fa-save mr-2"></i> 保存
        </button>
    </div>
</form>

<script>
// 客户选择变化时，更新联系人列表
document.addEventListener('DOMContentLoaded', function() {
    const customerSelect = document.getElementById('customer-select');
    const contactCheckContainer = document.querySelector('.form-check-container');
    const solutionSupportCheckbox = document.getElementById('{{ form.solution_support.id }}');
    const solutionSupportUserContainer = document.getElementById('solution-support-user-container');
    
    // 客户选择变化事件
    if (customerSelect) {
        customerSelect.addEventListener('change', function() {
            const customerId = this.value;
            if (customerId) {
                // 加载该客户的联系人
                fetch(`/followup/api/customer/${customerId}/contacts`)
                    .then(response => response.json())
                    .then(contacts => {
                        // 清空现有联系人选项
                        contactCheckContainer.innerHTML = '';
                        
                        if (contacts && contacts.length > 0) {
                            // 添加新的联系人选项
                            contacts.forEach(contact => {
                                const div = document.createElement('div');
                                div.className = 'flex items-center';
                                
                                const input = document.createElement('input');
                                input.type = 'checkbox';
                                input.name = 'contact_ids';
                                input.value = contact.id;
                                input.className = 'h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded';
                                input.id = `contact_${contact.id}`;
                                
                                const label = document.createElement('label');
                                label.htmlFor = `contact_${contact.id}`;
                                label.className = 'ml-2 block text-sm text-gray-700';
                                label.textContent = contact.name;
                                
                                div.appendChild(input);
                                div.appendChild(label);
                                contactCheckContainer.appendChild(div);
                            });
                        } else {
                            contactCheckContainer.innerHTML = '<p class="text-sm text-gray-500">该客户暂无联系人</p>';
                        }
                    })
                    .catch(error => {
                        console.error('加载联系人失败:', error);
                        contactCheckContainer.innerHTML = '<p class="text-sm text-red-500">加载联系人失败</p>';
                    });
            } else {
                contactCheckContainer.innerHTML = '<p class="text-sm text-gray-500">请先选择客户</p>';
            }
        });
    }
    
    // 解决方案配合复选框变化事件
    if (solutionSupportCheckbox) {
        solutionSupportCheckbox.addEventListener('change', function() {
            if (this.checked) {
                solutionSupportUserContainer.style.display = 'block';
            } else {
                solutionSupportUserContainer.style.display = 'none';
            }
        });
    }
});
</script>